<template>
    <div style="height: 100%;">
        <div class="search_bar" style="z-index: 999;position: static">
            <div class="search_icon">
                <img :src="search_btn"/>
            </div>
            <div class="search_input">
                <form action="javascript:void 0" style="height: 100%;">
                    <input type="search" placeholder="搜索" @keyup.13="tapToSearch"
                           style="border: none;width: 100%;padding: 0;height: 100%;" v-model="keyWords"/>
                </form>
            </div>
        </div>
        <Tabs v-model="active" color="#454592" @change="tabsChange"
              style="z-index: 999;padding-bottom: 95px;">
            <Tab title="按姓氏" style="min-height: 700px;">
                <template #title>
                    <div :style="{color:active==0?'#454592':''}"
                         style="display: flex;align-items: center;justify-content: center;font-family: PingFangSC-Regular;font-size: 14px;color: #333333;letter-spacing: 0.26px;text-align: center;">
                        按姓氏
                    </div>
                </template>
                <RadioGroup v-model="check">
                    <Collapse v-model="tab1Active">
                        <CollapseItem title="a" :name="tab.group" v-for="(tab,tab1_idx) in tab1List"
                                      :key="tab.id">
                            <template #title>
                                <div class="title_filter">
                                    <div class="title_block"></div>
                                    <div class="title_text">
                                        {{tab.group}}
                                    </div>
                                </div>
                            </template>
                            <div class="contact_item" :style="contact.id==check?'background:rgba(69,69,146,0.06)':''"
                                 v-for="(contact,contact_idx) in tab.list" @click="handleContactClick(contact)">
                                <div class="avatar">
                                    <img :src="doctor_icon" style="width: 40px;height: 40px;"/>
                                </div>
                                <div class="contact_content">
                                    <div class="content_header">
                                        <span style="font-family: PingFangSC-Regular;font-size: 16px;color: #333;letter-spacing: 0.3px;text-align: justify;line-height: 22px;">
                                            {{contact.name}}
                                        </span>
                                        <div style="height: 20px;width: 20px;margin:0 4px;" v-if="contact.verify">
                                            <img :src="wechat_icon" style="width: 20px;height: 20px;"/>
                                        </div>
                                        <span style="margin: 0 4px;width: 1px;height: 10px;background-color: #333;">

                                        </span>
                                        <span style="font-family: PingFangSC-Regular;font-size: 12px;color: #333;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">
                                            {{contact.dept}}
                                        </span>
                                    </div>
                                    <div class="content_hosp">
                                        {{contact.hosp}}
                                    </div>
                                </div>
                                <div style="position: absolute;right: 0;height: 100%;width: 40px;display: flex;justify-content: center;align-items: center;">
                                    <Radio :name="contact.id">
                                        <template #icon="props">
                                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                                        </template>
                                    </Radio>
                                </div>
                            </div>

                        </CollapseItem>
                    </Collapse>
                </RadioGroup>
                <infinite-loading @infinite="loadmore" ref="infiniteLoading" :identifier="active">
                                   <span slot="no-more"><span
                                           style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span></span>
                    <span slot="no-results"
                          style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span>
                </infinite-loading>
            </Tab>
            <Tab title="按科室" style="min-height: 700px;">
                <template #title>
                    <div :style="{color:active==1?'#454592':''}"
                         style="display: flex;align-items: center;justify-content: center;font-family: PingFangSC-Regular;font-size: 14px;color: #333333;letter-spacing: 0.26px;text-align: center;">
                        按科室
                    </div>
                </template>
                <RadioGroup v-model="check">
                    <Collapse v-model="tab2Active">
                        <CollapseItem title="a" :name="tab.group" v-for="(tab,tab1_idx) in tab2List" :key="tab.id"
                        >
                            <template #title>
                                <div class="title_filter">
                                    <div class="title_block"></div>
                                    <div class="title_text">
                                        {{tab.group}}
                                    </div>
                                </div>
                            </template>
                            <div class="contact_item" :style="contact.id==check?'background:rgba(69,69,146,0.06)':''"
                                 v-for="(contact,contact_idx) in tab.list" @click="handleContactClick(contact)">
                                <div class="avatar">
                                    <img :src="doctor_icon" style="width: 40px;height: 40px;"/>
                                </div>
                                <div class="contact_content">
                                    <div class="content_header">
                                        <span style="font-family: PingFangSC-Regular;font-size: 16px;color: #333;letter-spacing: 0.3px;text-align: justify;line-height: 22px;">
                                            {{contact.name}}
                                        </span>
                                        <div style="height: 20px;width: 20px;margin:0 4px;" v-if="contact.verify">
                                            <img :src="wechat_icon" style="width: 20px;height: 20px;"/>
                                        </div>
                                        <span style="margin: 0 4px;width: 1px;height: 10px;background-color: #333;">

                                        </span>
                                        <span style="font-family: PingFangSC-Regular;font-size: 12px;color: #333;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">
                                            {{contact.dept}}
                                        </span>
                                    </div>
                                    <div class="content_hosp">
                                        {{contact.hosp}}
                                    </div>
                                </div>
                                <div style="position: absolute;right: 0;height: 100%;width: 40px;display: flex;justify-content: center;align-items: center;">
                                    <Radio :name="contact.id">
                                        <template #icon="props">
                                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                                        </template>
                                    </Radio>
                                </div>
                            </div>
                        </CollapseItem>
                    </Collapse>
                </RadioGroup>
                <infinite-loading @infinite="loadmore" ref="infiniteLoading" :identifier="active">
                                   <span slot="no-more"><span
                                           style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span></span>
                    <span slot="no-results"
                          style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span>
                </infinite-loading>
            </Tab>
            <Tab title="按医院" style="min-height: 700px;">
                <template #title>
                    <div :style="{color:active==2?'#454592':''}"
                         style="display: flex;align-items: center;justify-content: center;font-family: PingFangSC-Regular;font-size: 14px;color: #333333;letter-spacing: 0.26px;text-align: center;">
                        按医院
                    </div>
                </template>
                <RadioGroup v-model="check">
                    <Collapse v-model="tab3Active">
                        <CollapseItem title="a" :name="tab.group" v-for="(tab,tab1_idx) in tab3List" :key="tab.id"
                        >
                            <template #title>
                                <div class="title_filter">
                                    <div class="title_block"></div>
                                    <div class="title_text">
                                        {{tab.group}}
                                    </div>
                                </div>
                            </template>
                            <div class="contact_item" :style="contact.id==check?'background:rgba(69,69,146,0.06)':''"
                                 v-for="(contact,contact_idx) in tab.list" @click="handleContactClick(contact)">
                                <div class="avatar">
                                    <img :src="doctor_icon" style="width: 40px;height: 40px;"/>
                                </div>
                                <div class="contact_content">
                                    <div class="content_header">
                                        <span style="font-family: PingFangSC-Regular;font-size: 16px;color: #333;letter-spacing: 0.3px;text-align: justify;line-height: 22px;">
                                            {{contact.name}}
                                        </span>
                                        <div style="height: 20px;width: 20px;margin:0 4px;" v-if="contact.verify">
                                            <img :src="wechat_icon" style="width: 20px;height: 20px;"/>
                                        </div>
                                        <span style="margin: 0 4px;width: 1px;height: 10px;background-color: #333;">

                                        </span>
                                        <span style="font-family: PingFangSC-Regular;font-size: 12px;color: #333;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">
                                            {{contact.dept}}
                                        </span>
                                    </div>
                                    <div class="content_hosp">
                                        {{contact.hosp}}
                                    </div>
                                </div>
                                <div style="position: absolute;right: 0;height: 100%;width: 40px;display: flex;justify-content: center;align-items: center;">
                                    <Radio :name="contact.id">
                                        <template #icon="props">
                                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                                        </template>
                                    </Radio>
                                </div>
                            </div>
                        </CollapseItem>
                    </Collapse>
                </RadioGroup>
                <infinite-loading @infinite="loadmore" ref="infiniteLoading" :identifier="active">
                                   <span slot="no-more"><span
                                           style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span></span>
                    <span slot="no-results"
                          style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span>
                </infinite-loading>
            </Tab>
            <Tab title="按认证" style="min-height: 700px;">
                <template #title>
                    <div :style="{color:active==3?'#454592':''}"
                         style="display: flex;align-items: center;justify-content: center;font-family: PingFangSC-Regular;font-size: 14px;color: #333333;letter-spacing: 0.26px;text-align: center;">
                        按认证
                    </div>
                </template>
                <RadioGroup v-model="check">
                    <Collapse v-model="tab4Active">
                        <CollapseItem title="a" :name="tab.group" v-for="(tab,tab1_idx) in tab4List" :key="tab.id">
                            <template #title>
                                <div class="title_filter">
                                    <div class="title_block"></div>
                                    <div class="title_text">
                                        {{tab.group}}
                                    </div>
                                </div>
                            </template>
                            <div class="contact_item" :style="contact.id==check?'background:rgba(69,69,146,0.06)':''"
                                 v-for="(contact,contact_idx) in tab.list" @click="handleContactClick(contact)">
                                <div class="avatar">
                                    <img :src="doctor_icon" style="width: 40px;height: 40px;"/>
                                </div>
                                <div class="contact_content">
                                    <div class="content_header">
                                        <span style="font-family: PingFangSC-Regular;font-size: 16px;color: #333;letter-spacing: 0.3px;text-align: justify;line-height: 22px;">
                                            {{contact.name}}
                                        </span>
                                        <div style="height: 20px;width: 20px;margin:0 4px;" v-if="contact.verify">
                                            <img :src="wechat_icon" style="width: 20px;height: 20px;"/>
                                        </div>
                                        <span style="margin: 0 4px;width: 1px;height: 10px;background-color: #333;">

                                        </span>
                                        <span style="font-family: PingFangSC-Regular;font-size: 12px;color: #333;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">
                                            {{contact.dept}}
                                        </span>
                                    </div>
                                    <div class="content_hosp">
                                        {{contact.hosp}}
                                    </div>
                                </div>
                                <div style="position: absolute;right: 0;height: 100%;width: 40px;display: flex;justify-content: center;align-items: center;">
                                    <Radio :name="contact.id">
                                        <template #icon="props">
                                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                                        </template>
                                    </Radio>
                                </div>
                            </div>
                        </CollapseItem>
                    </Collapse>
                </RadioGroup>
                <infinite-loading @infinite="loadmore" ref="infiniteLoading" :identifier="active">
                                   <span slot="no-more"><span
                                           style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span></span>
                    <span slot="no-results"
                          style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span>
                </infinite-loading>
            </Tab>

        </Tabs>
        <div class="bottom_btn">
            <div style="width: 100%;margin:0 20px;display: flex;margin-top:54px;display: flex;justify-content: space-around">
                <div class="btn_cancle" @click="cancel">取消</div>
                <div class="btn_confirm" @click="save">确定</div>
            </div>

        </div>
    </div>
</template>

<script>

    import search_btn from './img/search_btn.svg'
    import {RadioGroup, Radio, Tab, Tabs, Popup, Icon, Overlay, Collapse, CollapseItem} from 'vant'
    import check_icon from './img/check.svg'
    import uncheck_icon from './img/uncheck.svg'
    import doctor_icon from './img/doctor.svg'
    import wechat_icon from './img/wechat.svg'
    import {getHospitalTabList, getDeptTabList, getSurnameTabList, getCertificationTabList} from '@api/schedule'
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        components: {
            Tab,
            Tabs,
            Collapse,
            CollapseItem,
            RadioGroup,
            Radio,
            InfiniteLoading
        },
        data() {
            return {
                search_btn: search_btn,
                active: 0,
                tab1Active: [],
                tab2Active: [],
                tab3Active: [],
                tab4Active: [],
                activeIcon: check_icon,
                inactiveIcon: uncheck_icon,
                doctor_icon: doctor_icon,
                wechat_icon: wechat_icon,
                check: '',
                tab1List: [],
                tab2List: [],
                tab3List: [],
                tab4List: [],
                tab3page: 1,
                tab3limit: 10,
                tab2page: 1,
                tab2limit: 10,
                tab1page: 1,
                tab1limit: 10,
                tab4page: 1,
                tab4limit: 10,
                saveObject: {},
                keyWords: ''
            }
        },
        methods: {
            tabsChange(name, title) {
                if (name == 0) {
                    this.tab1page = 1
                    this.tab1List = []
                    this.getSurnameList()
                } else if (name == 1) {
                    this.tab2page = 1
                    this.tab2List = []
                    this.getDeptList()
                } else if (name == 2) {
                    this.tab3page = 1
                    this.tab3List = []
                    this.getHospitalList()
                } else if (name == 3) {
                    this.tab4page = 1
                    this.tab4List = []
                    this.getCertificationList()
                }
            },
            tapToSearch() {
                if (this.active == 0) {
                    this.tab1page = 1
                    this.tab1List = []
                    this.getSurnameList()
                } else if (this.active == 1) {
                    this.tab2page = 1
                    this.tab2List = []
                    this.getDeptList()
                } else if (this.active == 2) {
                    this.tab3page = 1
                    this.tab3List = []
                    this.getHospitalList()
                } else if (this.active == 3) {
                    this.tab4page = 1
                    this.tab4List = []
                    this.getCertificationList()
                }
            },
            handleContactClick(contact) {
                this.check = contact.id
                this.saveObject = contact
            },
            cancel() {
                this.$emit('hide')
            },
            save() {
                if (this.saveObject) {
                    this.$emit('save', this.saveObject)
                }
            },
            loadmore($state) {
                if (this.active == 0) {
                    this.tab1page++
                    this.getSurnameListByPage($state)
                } else if (this.active == 1) {
                    this.tab2page++
                    this.getDeptListByPage($state)
                } else if (this.active == 2) {
                    this.tab3page++
                    this.getHospitalListByPage($state)
                } else if (this.active == 3) {
                    this.tab4page++
                    this.getCertificationListByPage($state)
                }
            },
            getSurnameList() {
                getSurnameTabList({pageNo: 1, limit: this.tab1limit, params: this.keyWords}).then(res => {
                    if (res.successful) {
                        let group = this.tab1List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf(item.hcpLastNameInitial)
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab1List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: hcp.hcpDeptName,
                                        hosp: hcp.hcoName,
                                        verify: hcp.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab1Active = this.tab1List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.hcpLastNameInitial, list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: contact.hcpDeptName,
                                            hosp: contact.hcoName,
                                            verify: contact.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab1List.push(arr)
                                this.tab1Active = this.tab1List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            getSurnameListByPage($state) {
                getSurnameTabList({pageNo: this.tab1page, limit: this.tab1limit, params: this.keyWords}).then(res => {
                    if (res.successful) {
                        if (res.page.nextPageEnable < 1) {
                            $state.complete()
                        } else {
                            $state.loaded()
                        }
                        let group = this.tab1List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf(item.hcpLastNameInitial)
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab1List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: hcp.hcpDeptName,
                                        hosp: hcp.hcoName,
                                        verify: hcp.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab1Active = this.tab1List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.hcpLastNameInitial, list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: contact.hcpDeptName,
                                            hosp: contact.hcoName,
                                            verify: contact.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab1List.push(arr)
                                this.tab1Active = this.tab1List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            getDeptList() {
                getDeptTabList({pageNo: this.tab2page, limit: this.tab2limit, params: this.keyWords}).then(res => {
                    if (res.successful) {
                        let group = this.tab2List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf(item.hcpDeptName)
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab2List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: item.hcpDeptName,
                                        hosp: hcp.hcoName,
                                        verify: hcp.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab2Active = this.tab2List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.hcpDeptName, list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: item.hcpDeptName,
                                            hosp: contact.hcoName,
                                            verify: contact.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab2List.push(arr)
                                this.tab2Active = this.tab2List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            getDeptListByPage($state) {
                getDeptTabList({pageNo: this.tab2page, limit: this.tab2limit, params: this.keyWords}).then(res => {
                    if (res.successful) {
                        if (res.page.nextPageEnable < 1) {
                            $state.complete()
                        } else {
                            $state.loaded()
                        }
                        let group = this.tab2List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf(item.hcpDeptName)
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab2List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: item.hcpDeptName,
                                        hosp: hcp.hcoName,
                                        verify: hcp.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab2Active = this.tab2List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.hcpDeptName, list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: item.hcpDeptName,
                                            hosp: contact.hcoName,
                                            verify: contact.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab2List.push(arr)
                                this.tab2Active = this.tab2List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            getHospitalListByPage($state) {
                getHospitalTabList({pageNo: this.tab3page, limit: this.tab3limit, params: this.keyWords}).then(res => {
                    if (res.successful) {
                        if (res.page.nextPageEnable < 1) {
                            $state.complete()
                        } else {
                            $state.loaded()
                        }
                        let group = this.tab3List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf(item.hcoName)
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab3List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: hcp.hcpDeptName,
                                        hosp: item.hcoName,
                                        verify: hcp.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab3Active = this.tab3List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.hcoName, list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: contact.hcpDeptName,
                                            hosp: item.hcoName,
                                            verify: contact.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab3List.push(arr)
                                this.tab3Active = this.tab3List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            getHospitalList() {
                getHospitalTabList({pageNo: this.tab3page, limit: this.tab3limit, params: this.keyWords}).then(res => {
                    if (res.successful) {
                        let group = this.tab3List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf(item.hcoName)
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab3List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: hcp.hcpDeptName,
                                        hosp: item.hcoName,
                                        verify: hcp.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab3Active = this.tab3List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.hcoName, list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: contact.hcpDeptName,
                                            hosp: item.hcoName,
                                            verify: contact.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab3List.push(arr)
                                this.tab3Active = this.tab3List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            getCertificationListByPage($state) {
                getCertificationTabList({
                    pageNo: this.tab4page,
                    limit: this.tab4limit,
                    params: this.keyWords
                }).then(res => {
                    if (res.successful) {
                        if (res.page.nextPageEnable < 1) {
                            $state.complete()
                        } else {
                            $state.loaded()
                        }
                        let group = this.tab4List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf((item.isVerifiedHcp == '是' ? '已认证客户' : '未认证客户'))
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab4List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: hcp.hcpDeptName,
                                        hosp: hcp.hcoName,
                                        verify: item.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab3Active = this.tab3List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.isVerifiedHcp == "是" ? '已认证客户' : '未认证客户',
                                    list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: contact.hcpDeptName,
                                            hosp: contact.hcoName,
                                            verify: item.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab4List.push(arr)
                                this.tab4Active = this.tab4List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            getCertificationList() {
                getCertificationTabList({
                    pageNo: this.tab4page,
                    limit: this.tab4limit,
                    params: this.keyWords
                }).then(res => {
                    if (res.successful) {
                        let group = this.tab4List.map(item => item.group)
                        res.data.map(item => {
                            let groupIdx = group.indexOf((item.isVerifiedHcp == '是' ? '已认证客户' : '未认证客户'))
                            if (groupIdx != -1) {
                                item.hcpList.map(hcp => {
                                    this.tab4List[groupIdx].list.push({
                                        id: hcp.hcpId,
                                        name: hcp.hcpName,
                                        dept: hcp.hcpDeptName,
                                        hosp: hcp.hcoName,
                                        verify: item.isVerifiedHcp == '是' ? true : false,
                                        unionId: hcp.hcpUnionId,
                                    })
                                })
                                this.tab3Active = this.tab3List.map(item => item.group)
                            } else {
                                let arr = {
                                    group: item.isVerifiedHcp == "是" ? '已认证客户' : '未认证客户',
                                    list: item.hcpList.map(contact => {
                                        return {
                                            id: contact.hcpId,
                                            name: contact.hcpName,
                                            dept: contact.hcpDeptName,
                                            hosp: contact.hcoName,
                                            verify: item.isVerifiedHcp == '是' ? true : false,
                                            unionId: contact.hcpUnionId
                                        }
                                    })
                                }
                                this.tab4List.push(arr)
                                this.tab4Active = this.tab4List.map(item => item.group)
                            }
                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
        },
        mounted() {
            this.getSurnameList()
        }
    }
</script>

<style scoped>
    @import "index.css";
</style>
<style lang="scss" scoped>
    /deep/ .van-tabs__line {
        width: 25% !important;
        height: 2px !important;
    }
</style>